// 光照
import { useEffect } from 'react'
import * as THREE from 'three'
import './App.css'
// 导入轨道控制器
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls'

import { GUI } from 'three/examples/jsm/libs/lil-gui.module.min.js'
function App() {

    useEffect(() => {
        // 场景
        const scene = new THREE.Scene()
        // 创建相机
        const camera = new THREE.PerspectiveCamera(
            45,//相机的角度
            window.innerWidth / window.innerHeight,//相机的宽高比
            0.01,//相机的近截面
            1000//相机的远截面
        )
        // 相机位置

        camera.position.set(0, 10, 20);
        // 创建渲染器
        const renderer = new THREE.WebGLRenderer()
        renderer.setSize(window.innerWidth, window.innerHeight)//设置渲染尺寸
        document.body.appendChild(renderer.domElement)//将渲染器添加到文档中

        // --------------------------------main--------------------------------------------
        // 创建几何体

        // 加载纹理
        const planeSize = 40;

        const loader = new THREE.TextureLoader();
        loader.load('./checker.png', (texture) => {
            texture.wrapS = THREE.RepeatWrapping;
            texture.wrapT = THREE.RepeatWrapping;
            texture.magFilter = THREE.NearestFilter;
            texture.colorSpace = THREE.SRGBColorSpace;

            const repeats = planeSize / 2;
            texture.repeat.set(repeats, repeats);

            const planeGeo = new THREE.PlaneGeometry(planeSize, planeSize);
            const planeMat = new THREE.MeshPhongMaterial({
                map: texture,
                side: THREE.DoubleSide,
            });

            const mesh = new THREE.Mesh(planeGeo, planeMat);
            mesh.rotation.x = Math.PI * -.5;
            scene.add(mesh);
        });

        {
            const cubeSize = 4;
            const cubeGeo = new THREE.BoxGeometry(cubeSize, cubeSize, cubeSize);
            const cubeMat = new THREE.MeshPhongMaterial({ color: '#8AC' });
            const mesh = new THREE.Mesh(cubeGeo, cubeMat);
            mesh.position.set(cubeSize + 1, cubeSize / 2, 0);
            scene.add(mesh);
        }
        {
            const sphereRadius = 3;
            const sphereWidthDivisions = 32;
            const sphereHeightDivisions = 16;
            const sphereGeo = new THREE.SphereGeometry(sphereRadius, sphereWidthDivisions, sphereHeightDivisions);
            const sphereMat = new THREE.MeshPhongMaterial({ color: '#CA8' });
            const mesh = new THREE.Mesh(sphereGeo, sphereMat);
            mesh.position.set(-sphereRadius - 1, sphereRadius + 2, 0);
            scene.add(mesh);
        }
        // 环境光
        // const color = 0xFFFFFF;
        // const intensity = 1;
        // const light = new THREE.AmbientLight(color, intensity);

        // 半球光
        // const skyColor = 0xB1E1FF;  // light blue
        // const groundColor = 0xB97A20;  // brownish orange
        // const intensity = 1;
        // const light = new THREE.HemisphereLight(skyColor, groundColor, intensity);

        // 方向光
        // const color = 0xFFFFFF;
        // const intensity = 1;
        // const light = new THREE.DirectionalLight(color, intensity);
        // light.position.set(0, 10, 0);
        // light.target.position.set(-5, 0, 0);
        // scene.add(light);
        // scene.add(light.target);

        // 点光源
        const color = 0xFFFFFF;    
        const intensity = 150;
        const light = new THREE.PointLight(color, intensity);
        light.position.set(0, 10, 0);

      
        scene.add(light);

        // 点光源辅助器
        const helper = new THREE.PointLightHelper(light);
        scene.add(helper);
        // --------------------------------main--------------------------------------------

        // 设置相机位置
        camera.position.z = 5
        camera.position.y = 2
        camera.position.x = 2
        camera.lookAt(0, 0, 0)

        // 添加世界坐标辅助器
        const axesHelper = new THREE.AxesHelper(5)
        scene.add(axesHelper)


        // 创建轨道控制器
        const controls = new OrbitControls(camera, renderer.domElement)
        controls.target.set(0, 5, 0);
        controls.update();
        // 阻尼
        controls.enableDamping = true
        // 旋转
        controls.enableRotate = true
        // 缩放
        controls.enableZoom = true
        // 设置阻尼系数
        controls.dampingFactor = 0.05
        // 渲染
        renderer.render(scene, camera)

        // 渲染函数
        function animate() {
            requestAnimationFrame(animate)
            // 更新轨道控制器
            controls.update()
            renderer.render(scene, camera)
        }
        // 调用渲染函数
        animate()
        // 监听窗口变化
        window.addEventListener('resize', () => {
            // 更新相机
            camera.aspect = window.innerWidth / window.innerHeight
            camera.updateProjectionMatrix()
            // 更新渲染器
            renderer.setSize(window.innerWidth, window.innerHeight)
            renderer.setPixelRatio(window.devicePixelRatio)
        })
    }, [])
    return (
        <>
        </>
    )
}

export default App
